{% extends "public/layout.html" %}

{% block css %}
    <link rel="stylesheet" href="/static/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
    #table_content{display: none}
    .chosen-container{width:350px !important;}
</style>
{% endblock %}


{% block body %}

        <div class="col-xs-3">
           <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="col-md-9">
            <table class="table" id="table_content">
                <caption class="text-right">
                    <button class="btn btn-primary btn-sm" id="add_graphite_key_btn">添加</button>
                </caption>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>图片标题</th>
                        <th>key</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbody_graphite_key">
                </tbody>
            </table>
        </div>



<div class="modal fade" id="add_graphite_group_keys_modal" aria-hidden="true">
	<div class="modal-dialog">
	    <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4>添加graphite keys</h4>
            </div>
                <form class="form-horizontal" id="graphite_content" role="form" style="width:90%;">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-xs-2 control-label">key 名称:</label>
                        <div class="col-xs-7 col-md-7" style="width:350px;">
                            <select class="form-control chosen-select" name="graphite_key_id" id="graphite_key_id" >
                                <option value="">请选择key名称</option>
                                {% for graphitekey in graphitekeys %}
                                    <option value="{{ graphitekey.id }}">{{ graphitekey.title }}</option>
                                {% endfor %}
                            </select>

                        </div>
                     </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" id="submit_add_graphite_group_keys_modal">添加</button>
                        </div>
                    </div>
                </form>


            <div class="modal-footer">
                <input class="btn btn-default" data-dismiss="modal" aria-hidden="true" type="button" value="取消">
            </div>

        </div>
    </div>
</div>

{% endblock %}



{% block js %}


<script type="text/javascript" src="/static/zTree_v3-master/js/jquery.ztree.core.js"></script>
<script>

var current_product = null;     // 当前点击的 product
var tbody_graphite_key_obj = $("#tbody_graphite_key");
var table_content_obj = $("#table_content");

function del_graphite_metrics(){
    $(".del_graphite_key").click(function(){
        var click_obj = $(this)
        $.ajax({
            url: "/resources/graphite/group/key/",
            data: {"service_id": current_product, "key_id": click_obj.attr('data')},
            type: "DELETE",
            success: function (res) {
                if(res.status == 0){
                    swal({
                        "title": "删除成功!",
                        "text": "",
                        "type": "success"
                        }, function(){
                            click_obj.parents('tr').remove()
                        })

                }else{
                    swal({
                        "title": "操作失败!",
                        "text": res.errmsg,
                        "type": "error"
                        })
                }
            },
            timeout: 600000
        });
        return false;
    })
}

function get_graphite_metrics(){
    tbody_graphite_key_obj.empty()
    $.ajax({
        url: "/graphite/group/key/",
        data: {"id": current_product},
        type: "GET",
        success: function (res) {
            if(res.status == 0){
                $.each(res.data, function(i, obj){
                    str = "<tr>";
                    str += '<td>'+(i+1)+'</td>';
                    str += '<td>'+obj.title+'</td>';
                    str += '<td>'+obj.name+'</td>';
                    str += '<td><button class="btn btn-danger btn-sm del_graphite_key" data="'+obj.id+'">删除</button></td>';
                    str += "</tr>";
                    tbody_graphite_key_obj.append(str)
                })
                table_content_obj.fadeIn('fast')
                del_graphite_metrics()
            }else{
                swal({
                    "title": "操作失败!",
                    "text": "",
                    "type": "error"
                    })
            }
        },
        timeout: 600000
    });
    return false;
}

function zTreeOnClick(event, treeId, treeNode) {
    if (treeNode.id === current_product){
            return false
        }


    table_content_obj.hide();
    if (treeNode.level == 1){

        current_product = treeNode.id;
        get_graphite_metrics()
    }else{
        current_product = null;
    }
}


var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
    callback:{
        onClick: zTreeOnClick
    },
    view: {
        fontCss : {fontSize:"16px"}
    }
};
var zNodes = {{ ztree|safe }};
$(function(){
    //chosen select input
    $(".chosen-select").chosen({disable_search_threshold: 10});

    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

    //给group 添加  graphite key
    $("#add_graphite_key_btn").click(function(){
        $("#add_graphite_group_keys_modal").modal("show")
    })

    // 执行添加 graphite key

    $("#submit_add_graphite_group_keys_modal").click(function(){
        $("#add_graphite_group_keys_modal").modal("hide");
        key_value = $("#graphite_key_id").val();
        $.ajax({
            url: "/graphite/group/key/",
            data: {"service_id": current_product, "key_id": key_value},
            type: "PUT",
            success: function (res) {
                if(res.status == 0){
                    swal({
                        "title": "操作成功!",
                        "text": "",
                        "type": "success"
                        }, function(){
                            table_content_obj.hide();
                            get_graphite_metrics()
                        })
                }else{
                    swal({
                        "title": res.errmsg,
                        "text": "",
                        "type": "error"
                        })
                }
            },
            timeout: 600000
        });
        return false;
    })

})

</script>

{% endblock %}